<template>
    <div class="casesDetail">
        <Header></Header>
        <div class="casesDetail-main mn">
            <div class="top">
                <div class="tt">
                    济南域潇集团招标采购项目
                </div>
                <div class="tags">
                    <div class="left">
                        <el-tag style="margin-right: 10px;">招标分类</el-tag>
                        <el-tag type="danger">139万元</el-tag>
                    </div>
                    <div class="right">
                        <el-button type="primary" @click="openBid()">我要投标</el-button>
                        <div class="icon">
                            <el-icon>
                                <Star/>
                            </el-icon>
                            <p>关注</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="center">
                <div class="left">
                    <div class="top">
                        <div class="tt">负责人信息</div>
                        <div class="info">
                            <p>联系人：</p>
                            <p>联系电话：</p>
                            <p>采购单位：</p>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="tt">招标详情</div>
                        <div class="content"></div>
                    </div>
                </div>
                <div class="right">
                    <div class="tt">相关项目</div>
                    <div class="list">
                        <div v-for="item in 3" class="listitem">
                            <div class="tts">上饶师范学院音乐楼闲置的三十台钢琴转让拍卖公告</div>
                            <div class="tags">
                                <el-tag style="margin-right: 10px;">招标分类</el-tag>
                                <el-tag type="danger">139万元</el-tag>
                            </div>
                            <div class="p">2023-10-12</div>
                        </div>

                    </div>
                </div>
            </div>

        </div>


        <el-drawer v-model="drawer" :before-close="handleClose" :close-on-click-modal="false" :direction="direction"
                   size="650"
                   title="我要投标"
                   w>
            <div class="drawer">
                <div class="top">
                    <p>
                        采购名称
                    </p>
                    <p>
                        规格
                    </p>
                    <p>
                        数量
                    </p>
                    <p></p>
                </div>
                <div class="list">
                    <div v-for="item in initData.list" class="listitem">
                        <p>
                            {{ item.title }}
                        </p>
                        <p>
                            {{ item.specs }}
                        </p>
                        <p>
                            {{ item.num }}
                        </p>
                        <p>
                            <el-input v-model="item.price" placeholder="请输入金额" type="number"/>
                        </p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="ts">
                        合计总价
                    </div>
                    <p>
                        ￥{{ total }}
                    </p>
                </div>
                <div class="btns">
                    <el-button type="primary" @click="Submit()">提交报价</el-button>
                </div>

            </div>


        </el-drawer>

        <Footer></Footer>
    </div>
</template>


<script setup>
/**
 * 组件引入
 */
import {onMounted, reactive, ref, computed} from 'vue'
import http from "../../api/api.js"
import msg from "../../utils/Message.js"
import Footer from "../../components/Footer.vue"
import Header from "../../components/Header.vue"
import Cookies from "js-cookie";

/**
 * 全局变量
 * @type {UnwrapNestedRefs<{count: string, list: *[]}>}
 */

const totals = ref(0)

const drawer = ref(false)

// 全局数据
var initData = reactive({
    list: [
        {
            id: 0,
            title: "圆珠笔",
            specs: "晨光",
            num: 20,
            price: 0
        }, {
            id: 0,
            title: "圆珠笔",
            specs: "晨光",
            num: 20,
            price: 0
        }, {
            id: 0,
            title: "圆珠笔",
            specs: "晨光",
            num: 20,
            price: 0
        }]
})


/**
 * 页面挂载后
 */
onMounted(() => {

    // initPageData();
    isLogin()
});

/**
 * 计算属性
 */
//
// const fullName = computed < int > (() => {
//     let count = 0;
//     list.value.forEach(item => {
//         count += item.price
//     })
//     return count;
//
// });

const total = computed({
    get() {
        let count = 0;

        initData.list.forEach(item => {
            count += parseFloat(item.price)
        })

        totals.value = count

        return count;
    },

})

/**
 * 方法区
 */
// 提交报价
const Submit = () => {
    let total = totals.value

    if (total <= 0) {
        msg.message("报价不能小于0或等于0", 'error')
        return
    }

}

// 是否登录
const isLogin = () => {
    const token = Cookies.get("token")
    if (!token) {
        msg.message("您未登录，请登录", 'error')
    }
}

// 初始化数据
const initPageData = () => {
    http.HttpGet("GetDocumentClassIndex").then((res) => {
        initData.loading = false
        if (res.code == 0) {
            initData.list = res.data
            msg.message(res.msg)
        } else {
            msg.message(res.msg, 'error')
        }
    })
}


//关闭抽屉
function handleClose(done) {
    done();
}

// 打开抽屉
function openBid() {
    drawer.value = true
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/index.scss';
</style>

